<script setup lang="ts">
import CommonConfig from "./CommonConfig.vue";
import type { FormDesignerComponents } from "../FormComponentMixin";
import { getRandNodeId } from "@/utils/process";
const config = defineModel<FormDesignerComponents>("config");
const propsCollapse = ref("0");

const addCol = () => {
  config.value.props.columns.push({
    id: "GridCol" + getRandNodeId(),
    code: "GridCol" + getRandNodeId(),
    name: `栅格列${config.value.props.columns.length + 1}`,
    type: "GridCol",
    props: {
      isContainer: true,
      isFormItem: false,
      span: 12,
      offset: 0,
      push: 0,
      pull: 0,
      columns: []
    }
  });
};
</script>

<template>
  <el-collapse v-model="propsCollapse" accordion>
    <el-collapse-item name="0">
      <template #title>
        <div class="collapse-title">
          <el-icon color="#1890ff"><List /></el-icon>
          <div>基本属性</div>
        </div>
      </template>
      <CommonConfig v-model:config="config" />
      <el-form-item label="栅格间隔">
        <el-input
          v-model="config.props.gutter"
          type="number"
          placeholder="栅格间隔多少"
        />
      </el-form-item>
      <el-form-item label="当前栅格">
        <el-button type="primary" icon="circle-plus" @click="addCol"
          >添加栅格</el-button
        >
      </el-form-item>
      <div v-for="(item, index) in config.props.columns" class="cols-item">
        <div>{{ item.name }}</div>
        <div>
          宽度<el-input-number v-model="item.props.span" :min="0" :max="24" />
        </div>
        <div>
          <el-button
            icon="Delete"
            @click="config.props.columns.splice(index, 1)"
          />
        </div>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<style lang="scss" scoped>
.cols-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.collapse-title {
  padding: 0px 5px;
  display: flex;
  align-items: center;

  & > div {
    margin-left: 10px;
  }
}
</style>
